<template>
<!-- 修改用户推荐 -->
  <div class='consumerPayVip'>
    <el-dialog title="修改用户推荐活动" :visible.sync="isShow" center :before-close="close">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-position="left" label-width="200px">

        <el-row  :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="start_time">
              <el-date-picker
                v-model="form.start_time"
                type="datetime"
                placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row  :gutter="20">
          <el-col :span="12">
            <el-form-item label="结束时间" prop="end_time">
              <el-date-picker
                v-model="form.end_time"
                type="datetime"
                placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="积分兑换比例" prop="money_ratio">
              <el-input v-model="form.money_ratio"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="铜牌VIP最小积分" prop="vip1_min">
              <el-input v-model="form.vip1_min"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铜牌VIP最大积分" prop="vip1_max">
              <el-input v-model="form.vip1_max"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="铜牌VIP最小兑换积分" prop="vip1_min_exchange">
              <el-input v-model="form.vip1_min_exchange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="铜牌VIP最大兑换积分" prop="vip1_max_exchange">
              <el-input v-model="form.vip1_max_exchange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="铜牌VIP兑换比例" prop="vip1_ratio">
              <el-input v-model="form.vip1_ratio"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银牌VIP最小积分" prop="vip2_min">
              <el-input v-model="form.vip2_min"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="银牌VIP最大积分" prop="vip2_max">
              <el-input v-model="form.vip2_max"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银牌VIP最小兑换积分" prop="vip2_min_exchange">
              <el-input v-model="form.vip2_min_exchange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="银牌VIP最大兑换积分" prop="vip2_max_exchange">
              <el-input v-model="form.vip2_max_exchange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银牌VIP兑换比例" prop="vip2_ratio">
              <el-input v-model="form.vip2_ratio"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金牌VIP最小积分" prop="vip3_min">
              <el-input v-model="form.vip3_min"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金牌VIP最大积分" prop="vip3_max">
              <el-input v-model="form.vip3_max"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金牌VIP最小兑换积分" prop="vip3_min_exchange">
              <el-input v-model="form.vip3_min_exchange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金牌VIP最大兑换积分" prop="vip3_max_exchange">
              <el-input v-model="form.vip3_max_exchange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="钻石VIP最小积分" prop="vip4_min">
              <el-input v-model="form.vip4_min"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻石VIP最小积分" prop="vip4_min">
              <el-input v-model="form.vip4_min"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="钻石VIP最大积分" prop="vip4_max">
              <el-input v-model="form.vip4_max"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻石VIP最小兑换积分" prop="vip4_min_exchange">
              <el-input v-model="form.vip4_min_exchange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="钻石VIP最大兑换积分" prop="vip4_max_exchange">
              <el-input v-model="form.vip4_max_exchange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钻石VIP兑换比例" prop="vip4_ratio">
              <el-input v-model="form.vip4_ratio"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动下线" >
              <el-checkbox v-model="form.offline" disabled>是否下线活动</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submint">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    var validateRatio = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入兑换比例'))
      } else {
        if (!Number(value)) {
          callback(new Error('请输入正确的兑换比例'));
        } else if (value <= 0) {
          callback(new Error('兑换比例必须大于0'));
        } else {
          callback()
        }
      }
    }
    var  validatePoints  = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入积分'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error('请输正确的积分'));
      } else {
        callback();
      }
    }

    return {
      form: {
        start_time: '',
        end_time: '',
        money_ratio: '',
        vip1_min: '',
        vip1_max: '',
        vip1_min_exchange: '',
        vip1_max_exchange: '',
        vip1_ratio: '',
        vip2_min: '',
        vip2_max: '',
        vip2_min_exchange: '',
        vip2_max_exchange: '',
        vip2_ratio: '',
        vip3_min: '',
        vip3_max: '',
        vip3_min_exchange: '',
        vip3_max_exchange: '',
        vip3_ratio: '',
        vip4_min: '',
        vip4_max: '',
        vip4_min_exchange: '',
        vip4_max_exchange: '',
        vip4_ratio: '',
        name: '',
        offline: false
      },
      isShow: false,
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'change' }
        ],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        end_time: [
          { required: true, message: '请输入结束原因', trigger: 'change' }
        ],
        money_ratio: [
          { required: true, validator: validateRatio,trigger: 'change' }
        ],
        vip1_min: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip1_max: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip1_min_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip1_max_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip1_ratio: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip2_min: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip2_max: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip2_min_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip2_max_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip2_ratio: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip3_min: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip3_max: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip3_min_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip3_max_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip3_ratio: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip4_min: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip4_max: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip4_min_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip4_max_exchange: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],
        vip4_ratio: [
          { required: true, validator: validatePoints,trigger: 'change' }
        ],


      },
      id: '',
    }
  },
  methods: {
    show (data) {

      // let condition = JSON.parse(data.condition)
      let condition = data.condition
      this.id = data.id
      this.form.name = data.name
      this.form.start_time = condition.start_time
      this.form.end_time = condition.end_time
      this.form.money_ratio = condition.money_ratio
      this.form.vip1_min = condition.vip1.min
      this.form.vip1_max = condition.vip1.max
      this.form.vip1_min_exchange = condition.vip1.min_exchange
      this.form.vip1_max_exchange = condition.vip1.max_exchange
      this.form.vip1_ratio = condition.vip1.ratio

      this.form.vip2_min = condition.vip2.min
      this.form.vip2_max = condition.vip2.max
      this.form.vip2_min_exchange = condition.vip2.min_exchange
      this.form.vip2_max_exchange = condition.vip2.max_exchange
      this.form.vip2_ratio = condition.vip2.ratio

      this.form.vip3_min = condition.vip3.min
      this.form.vip3_max = condition.vip3.max
      this.form.vip3_min_exchange = condition.vip3.min_exchange
      this.form.vip3_max_exchange = condition.vip3.max_exchange
      this.form.vip3_ratio = condition.vip3.ratio

      this.form.vip4_min = condition.vip4.min
      this.form.vip4_max = condition.vip4.max
      this.form.vip4_min_exchange = condition.vip4.min_exchange
      this.form.vip4_max_exchange = condition.vip4.max_exchange
      this.form.vip4_ratio = condition.vip4.ratio
      this.isShow = true
    },
    submint() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submintPost()
        } else {
          return false;
        }
      })
    },
    submintPost() {
      let params = {
        name: this.form.name,
        activity: this.id
      }
      let condition = {}
      for( let key in this.form) {
        condition[key] = this.form[key]
      }
      for (let i = 1 ; i <= 4; i++) {
        condition[`vip${i}`] = {}
        condition[`vip${i}`].min = condition[`vip${i}_min`]
        condition[`vip${i}`].max = condition[`vip${i}_max`]
        condition[`vip${i}`].min_exchange = condition[`vip${i}_min_exchange`]
        condition[`vip${i}`].max_exchange = condition[`vip${i}_max_exchange`]
        condition[`vip${i}`].ratio = condition[`vip${i}_ratio`]

        delete condition[`vip${i}_min`]
        delete condition[`vip${i}_max`]
        delete condition[`vip${i}_min_exchange`]
        delete condition[`vip${i}_max_exchange`]
        delete condition[`vip${i}_ratio`]
      }
      delete condition.name
      // 下线活动
      if (this.form.offline) {
        params.status = 6
      }
      params.condition = JSON.stringify(condition)
      this.$axios.put( `api/activity/${this.id}`, params).then(res => {
        if (res.data.code == 200 ) {
          this.$message({
            message: '修改活动成功',
            type: 'success'
          })
          this.$emit('getData')
          this.close()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
          this.close()
        }

      })
    },
    close() {
      this.$refs['ruleForm'].resetFields()
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .consumerPayVip {
    .el-date-editor {
      width: 100%;
    }
  }

</style>
